WebP的简单介绍

起源

WebP 发音是Weppy，Google 在2010年发布的图片格式采用了 Fancy算法

WebP vs PNG

  • PNG转Webp的时候，压缩率要高于PNG的原图压缩率
  • 转换后的Webp比PNG的体积大幅度较小
  • 转换后Webp支持Alpha透明度和24-bit颜色，不存在PNG-8中色彩不够丰富以及浏览器毛边问题

Webp的支持度和兼容度目前来说都很好，Chrome赛高

WebP 和 PNG在Android及IOS下的测试结果：

  • WebP的平均CPU使用率比PNG要高
  • 内存使用率差不多

WebP 使用建议

  • 图片色彩数影响WebP的压缩比率，256色以下，建议采用无损压缩
  • 大于256（表情图，广告图）可以选择高压缩比有损压缩（75%-100%）
  • 远大于256（风景图，视频截图）采用中压缩比有损压缩
  • 色温不影响图片的压缩效果，曲线和杂色参见色彩数对于图片的影响
  • WebP不存在毛边问题，所以图片不用添加描边

动态WebP（Animated WebP）

和GIF一样，可以用于动画的制作

  • 支持有损压缩和无损压缩，并且可以合并有损和无损帧
  • 体积更小，将GIF转为有损Animated Webp可以减少64%体积，无损19%
  • 颜色更丰富，支持24-bit颜色和8-bit Alpha透明
  • 添加了关键帧，metadata等数据

动态WebP同样是需要压缩解压时候的CPU消耗

综合技术方案

如果你想用WebP，而目标平台的情况不明确的时候，可以这么做：

  1. 若使用场景是浏览器，可以：
    • JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片-
    • 使用 WebP 支持插件：WebPJS ，我去使用时发现已经挂了
  2. 若使用场景是 App，可以：
  3. 转换工具：

参考文献

https://isux.tencent.com/introduction-of-webp.html

http://en.wikipedia.org/wiki/WebP

https://developers.google.com/speed/webp/

http://tech.qq.com/a/20140721/074637.htm

http://faso.me/slides/2014/webp/

http://www.webpagetest.org/video/compare.php?tests=141121_3W_JT7,141121_6Q_JSM